<template>
    <container class="regular">
        <toolbar></toolbar>

        <el-card class="card">
            <el-input v-model="input" type="textarea" :autosize="{minRows: 6}"
                      placeholder="请输入待匹配文本"></el-input>

            <operation>
                <el-input slot="left" class="input" v-model="exp" size="mini"
                          placeholder="请输入正则表达式"></el-input>
                <el-row slot="right" class="buttons">
                    <el-col class="left" :span="16">
                        <el-checkbox class="checkbox" v-model="isGlobal" size="mini" border>全局匹配</el-checkbox>
                        <el-checkbox class="checkbox" v-model="isCase" size="mini" border>忽略大小写</el-checkbox>
                    </el-col>
                    <el-col class="right" :span="8">
                        <el-button type="warning" size="mini" @click="findClick">查找</el-button>
                    </el-col>
                </el-row>
            </operation>
            <operation>
                <el-input slot="left" class="input" v-model="replace" size="mini"
                          placeholder="请输入待替换文本"></el-input>
                <el-button slot="right" type="primary" size="mini" @click="replaceClick">替换</el-button>
            </operation>
        </el-card>

        <el-card class="card">
            <p class="tip" v-if="length!==null">共计<span v-text="length"></span>个匹配</p>
            <el-input v-model="output" type="textarea" :autosize="{minRows: 6}"
                      placeholder="尚无结果" readonly></el-input>
        </el-card>

    </container>
</template>

<script type="text/ecmascript-6">
  import Container from "../../components/common/Container";
  import Toolbar from "../../components/common/Toolbar";
  import Operation from "../../components/common/Operation";

  /**
   * @author 白雨浓
   * @date 2019/7/9 17:15
   *
   * 正则表达式
   **/
  export default {
    name: 'Regular',
    components: {Operation, Toolbar, Container},
    data() {
      return {
        input: '',
        exp: '',
        replace: '',
        output: '',
        length: null,
        isGlobal: true,
        isCase: false,
      }
    },
    watch: {
      exp() {
      }
    },
    methods: {
      findClick() {
        let flags = 'm';
        if (this.isGlobal) {
          flags += 'g';
        }
        if (this.isCase) {
          flags += 'i';
        }

        const reg = new RegExp(this.exp, flags);
        const res = this.input.match(reg);

        this.output = res.join('\n');
        this.length = res.length;
      },
      replaceClick() {

        let flags = 'm';
        if (this.isGlobal) {
          flags += 'g';
        }
        if (this.isCase) {
          flags += 'i';
        }

        const reg = new RegExp(this.exp, flags);
        this.output = this.input.replace(reg, this.replace);
        this.length = null;
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .regular {

    }

    .card {
        width 80%
        margin 20px auto
    }

    .buttons {
        width 90%

        .left {
            text-align left
        }

        .right {
            text-align right
        }

        .checkbox {
            margin-right 0 !important
        }
    }

    .tip {
        margin 5px
        font-size .8em
        color #999
    }
</style>
